@charset "UTF-8";

$hd: 1px; // 基本单位
// =========== global ==============
$max-width: 750upx;
$min-width: 300upx;

/* 
  主色
*/
$primary-1: #fff1e6;
$primary-2: #ffcba8;
$primary-3: #ffae80;
$primary-4: #ff8f57;
$primary-5: #ff6d2e;
$primary-6: #f54305;
$primary-7: #cf3000;
$primary-8: #a82200;
$primary-9: #821600;
$primary-10: #5c0c00;

// 全局颜色/品牌色
$brand-primary: $primary-6;
$brand-primary-tap: $primary-4;
$brand-success: #49af4f;
$brand-warning: #ffc600;
$brand-danger: #f4333c;
$brand-important: #ff5b05; // 用于小红点
$brand-wait: #108ee9;
$brand-info: #108ee9;

// 文字色
// 基本
$color-text-base: #000;
// 基本 - 反色
$color-text-base-inverse: #fff;
// 辅助色
$color-text-secondary: #a4a9b0;
// 文本框提示
$color-text-placeholder: #bbb;
// 失效
$color-text-disabled: #bbb;
// 辅助描述
$color-text-caption: #888;
// 段落
$color-text-paragraph: #333;
// 链接
$color-link: $brand-primary;
// 许多小图标的背景，比如一些小圆点，加减号
$color-icon-base: #ccc;

// 背景色
// 组件默认背景
$fill-base: #fff;
// 页面背景
$fill-body: #f5f5f9;
// 组件默认背景 - 按下
$fill-tap: #ddd;
// 通用失效背景
$fill-disabled: #ddd;
// 遮罩背景
$fill-mask: rgba(0, 0, 0, 0.4);

$fill-grey: #f7f7f7;

// 透明度
$opacity-disabled: 0.3; // switch checkbox radio 等组件禁用的透明度

// 字体尺寸
// ---
$font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', STHeiti, 'Microsoft Yahei', Tahoma,
	Simsun, sans-serif;

$font-size-mini: 24rpx; // 12px

$font-size-small: 24rpx; // 12px
// 基础字体大小
$font-size-base: 28rpx; // 14px

$font-size-large: 32rpx; // 16px

// 字体图标
$font-size-icontext: $font-size-base;
// 标题
$font-size-heading: $font-size-large;
// 副标题
$font-size-subhead: $font-size-large;
// 辅助描述
$font-size-caption: $font-size-small;
// 次要辅助描述
$font-size-caption-sm: $font-size-small;

// 圆角
// ---
$border-radius-mini: 2rpx;
$border-radius-small: 4rpx;
$border-radius-base: 8rpx;
$border-radius-large: 20rpx;

// 边框尺寸
// ---
$border-width-small: 1rpx;
$border-width-base: 2rpx;
$border-width-large: 3rpx;

// 边框色
$border-color-base: #ddd;

// 间距
// ---
// 水平间距
$h-spacing-mini: 4rpx;
$h-spacing-small: 10rpx;
$h-spacing-base: 20upx;
$h-spacing-large: 32rpx;

// 垂直间距
$v-spacing-mini: 4rpx;
$v-spacing-small: 10rpx;
$v-spacing-base: 20upx;
$v-spacing-large: 32rpx;

// 高度
// 行高
$line-height-base: 1.15; // 单行行高

$line-height-paragraph: 1.5; // 多行行高

// 图标尺寸
// ---
$icon-size-mini: 24rpx;
$icon-size-small: 28rpx;
$icon-size-base: 32rpx; // 导航条上的图标、grid的图标大小
$icon-size-large: 40rpx;

// 动画缓动
// ---
$ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);

$safe-tabbar-height: 0px;
$safe-tabbar-height: constant(safe-area-inset-bottom);
$safe-tabbar-height: env(safe-area-inset-bottom);
/************************************
  下面为各个组件各自的样式类

    1. 很多组件的样式都是继承与上面的基础主题
    2. 样式类都是以组件名称开头
      $btn--height
************************************/

/************************************
  整个页面有关的样式类  
  主要为
    - 页面背景色
    - 页面字体默认color
    - 页面字体默认size
    - 页面 Header 中定义的一些样式
    - 页面 sider 中定义的样式
************************************/

// // 页面的内边距
// $page-padding: $v-spacing-base $h-spacing-base;

// // 页面底部留下的一个空白的距离，主要是为了不让页面的内容紧紧地贴在底部，而是留下一点空白距离
// $page--padding-bottom: 40px;

$page-tabber-height: 98rpx;

// // 页面组件的外边距
// $component-margin-v: $v-spacing-base;

// // 整个页面的底色
// $page--background: $base-color--gray;
// // 组件的底色--突出组件与页面的色差
// $component--background: $base-color--white;
// // 弹出框的底色
// $popover--background: $base-color--white;

$layout-bottom--height: 100rpx;
// $layout-header--height: 92px;
// // 页面左右内边距大小
// $base-page--padding-horizontal: 30px;
// // 页面上下内边距大小
// $base-page--padding-vertical: 30px;
// // 基础边框样式
// $base--border: 1px solid #e7e7f0;

// $base--border-color: #e7e7f0;

// // 字体的样式
// // 默认字体颜色
// $base--text-color: rgba(0, 0, 0, 0.65);
// // 次要字体颜色
// $base--text-color-secondary: rgba(0, 0, 0, 0.45);
// // 反色字体颜色
// $base--text-color-inverse: $base-color--white;
// // 提示类字体的样式
// $base--text-color-tips: rgba(0, 0, 0, 0.3);

// /**
//   icon
// */
// $icon--color: inherit;
// // 字体图标反色颜色
// $icon--color-inverse: rgba($base-color--white, 0.45);

// // 提示类字体的大小
// $base--text-font-size: 28px;

// $base--text-font-size--tips: 28px;

// //
// // link 的默认颜色
// $base--a-color: $primary-6;

// /**
//  * 主题样式设置
//  */
// // 主题颜色
// $color--primary: #f54305;

// /* 页面左右间距 */
// $page-row-spacing: 30upx;

// $page-color-base: #f8f8f8;

// $page-color-light: #f8f6fc;

// $base-color: #fa436a;
// // 页面背景色
// $page-background-color: #f6f6fb;
// // 页面左右统一内边距
// $page-padding-horizontal: 30upx;
// // 所有的组件的背景色
// $panel-background-color: #fff;

// // 所有的组件的背景色
// $component-background-color: #f4f4f4;

// $base-text-font-size: 28upx;

// /* 文字尺寸 */
// $font-sm: 24upx;
// $font-base: 28upx;
// $font-lg: 32upx;
// /*文字颜色*/
// $font-color-dark: #303133;
// $font-color-base: #606266;
// $font-color-light: #909399;
// $font-color-disabled: #c0c4cc;
// $font-color-spec: #4399fc;
// /* 边框颜色 */
// $border-color-dark: #dcdfe6;
// $border-color-base: #e4e7ed;
// $border-color-light: #ebeef5;
// /* 图片加载中颜色 */
// $image-bg-color: #eee;
// /* 行为相关颜色 */
// $uni-color-primary: #fa436a;
// $uni-color-success: #4cd964;
// $uni-color-warning: #f0ad4e;
// $uni-color-error: #dd524d;
